import React from 'react'
import "./indexGoods.css"

function Indexgoods(props) {
    let { showGoods, changeFlagGoods } = props
    return (
        <div className="indexGoods">
            <div className="button">
                <button onClick={() => changeFlagGoods(0)}>限时秒杀</button>
                <button onClick={() => changeFlagGoods(1)}>畅销商品</button>
                <button onClick={() => changeFlagGoods(2)}>品质大牌</button>
                <button onClick={() => changeFlagGoods(3)}>小优自营</button>
            </div>
            {
                showGoods ? showGoods.content.map(item => (
                    <div className="goods" key={item.id}>
                        <div><img src={item.img} alt="" /></div>
                        <div className="goodsBox">
                            <p className="goodsname">{item.goodsname}</p>
                            <p>
                                <span className="price">现价￥{item.price}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                <span className="market_price">原价￥{item.market_price}</span>
                            </p>
                            <p className="shop">加入购物车</p>
                            <p className="description">{item.description}</p>
                        </div>
                    </div>
                )) : null
            }

        </div>
    )
}

export default React.memo(Indexgoods)